<template>
    <div class="main">
        <div class="Swipe">
            <van-swipe :autoplay="3000" lazy-render style="border-radius: 10px">
                <van-swipe-item v-for="image in images" :key="image">
                    <img :src="image" style="width: 400px" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="order">
            <!-- v-model="$data[item.stepper]" -->
            <div v-for="(item, i) in list" :key="i" style="margin-top: 8px">
                <van-card :title="item.name" :thumb="item.img">
                    <template #num>
                        <van-stepper
                            theme="round"
                            button-size="22"
                            disable-input
                            min="0"
                            @change="steChange"
                            :name="item.type"
                            default-value="0"
                            @plus="plus"
                            @minus="minus"
                        />
                    </template>
                    <template #desc>
                        <van-button
                            size="mini"
                            type="warning"
                            plain
                            style="margin-top: 4px"
                            >包邮</van-button
                        >
                    </template>
                    <template #price>
                        <span class="price">￥1000.00</span>
                    </template>
                </van-card>
            </div>
            <div style="height: 130px"></div>
        </div>
        <div class="up">
            <van-submit-bar
                :price="sumPrice"
                button-text="提交订单"
                @submit="onSubmit"
                button-color="#7232DD"
                style="bottom: 50px; border-top: solid 1px #ebeef5"
            >
                <p>共选择 {{ sumNumber }} 件</p>
            </van-submit-bar>
        </div>
        <van-tabbar route>
            <van-tabbar-item icon="home-o" replace to="/main"
                >主页</van-tabbar-item
            >
            <van-tabbar-item icon="search" replace to="/my"
                >订单</van-tabbar-item
            >
        </van-tabbar>
    </div>
</template>
<script>
import { Toast } from "vant";
export default {
    data() {
        return {
            images: ["img/banner.png", "img/banner.png"],
            sumNumber: 0,
            sumPrice: 0,
            list: [],
            arr: [],
            lastValue: 0,
            changeType: "",
        };
    },
    watch: {},
    mounted() {
        this.getData();
    },
    methods: {
        onSubmit() {
            const arr = [];

            for(let item of this.list){
                if(item.num !=0){
                    arr.push(item)
                }
            }
            var row = {
                list: arr,
                sumNumber: this.sumNumber,
                sumPrice: this.sumPrice,
            };
            if (this.sumNumber <= 0) {
                Toast.fail("请至少选择一种商品");
            } else {
                this.$router.push({
                    path: "order",
                    query: {
                        row: JSON.stringify(row), //先转为字符串
                    },
                });
            }
        },
        update() {
            this.reload();
        },
        async getData() {
            let data = [
                {
                    name: "冬奥会礼品火炬(原大尺寸)",
                    img: "img/1.png",
                    price: "1000.00",
                    stepper: "stepper1",
                },
                {
                    name: "冬残奥会礼品火炬(原大尺寸)",
                    img: "img/1-d.png",
                    price: "2000.00",
                    stepper: "stepper2",
                },
                {
                    name: "冬奥会复礼品火炬(复制品)",
                    img: "img/2.png",
                    price: "3000.00",
                    stepper: "stepper3",
                },
                {
                    name: "冬奥会复礼品火炬底座",
                    img: "img/2-d.png",
                    price: "4000.00",
                    stepper: "stepper4",
                },
            ];
            //this.list = data;
            var datas = {
                userid: "1",
            };
            var res = await this.$API.main.ProductList.get(datas);
            const list = res.value.rows;
            list.forEach((item, i) => {
                item.stepper = "setNum.stepper" + item.product_id;
                item.name = item.productname;
                item.price = item.productprice;
                item.img = 'img/'+item.productno + ".png";
                item.type = item.productno + " - " + item.price;
                item.num = 0;
            });
            this.list = list;
        },
        steChange(value, detail) {
            const name = detail.name.split(" - ")[0];
            const price = detail.name.split(" - ")[1];
            for (let item of this.list) {
                if (item.productno == name) {
                    item.num = value;
                }
            }
            if (this.changeType == "+") {
                this.sumNumber += 1;
                this.sumPrice += Number(price * 100);
            }

            if (this.changeType == "-") {
                this.sumNumber -= 1;
                this.sumPrice -= Number(price * 100);
            }
        },
        plus() {
            this.changeType = "+";
        },
        minus() {
            this.changeType = "-";
        },
    },
};
</script>
<style>
.van-card {
    border: solid 1px #f2f6fc;
    border-radius: 10px;
}
.price {
    color: #ee0a24;
    font-size: 16px;
    font-weight: bold;
}
.van-stepper--round .van-stepper__plus {
    background: var(--van-stepper-background-color);
}
.van-stepper--round .van-stepper__minus {
    color: var(--van-stepper-background-color);
    border: 1px solid var(--van-stepper-background-color);
}
:root {
    --van-stepper-background-color: var(--van-primary-color);

}
/* .van-submit-bar {
} */
</style>

